<template>
  <div class="menu-wrapper mysideBar">
    <div @mouseover="fastBox = true" @mouseleave="fastBox = false">
      <div class="mysideBarItem flex-c fast">
        <div class="text flex-c" alt="快速创建">快速创建</div>
        <div class="arrow flex-c"><i class="el-icon-caret-right"></i></div>
      </div>
      <transition name="el-fade-in-linear">
        <div class="mysideBarItem2" v-show="fastBox">
          <div class="mysideBarItemTit flex-c">
            <span style="margin-left: 5px">快速创建</span>
          </div>
          <div class="mysideBarItemCont">
            <template v-for="item in fastData">
              <div
                class="mysideBarItemContItem flex-c"
                :class="{
                  'is-active': vaildAvtive(item) || item.path == activePath,
                }"
                @mouseover="activePath = item.path"
                @mouseleave="activePath = null"
                @click="open(item)"
              >
                <span>{{ item[labelKey] }}</span>
              </div>
            </template>
          </div>
        </div>
      </transition>
    </div>

    <template v-for="item in menu">
      <div
        class="mysideBarItem flex-space"
        v-if="validatenull(item[childrenKey]) && vaildRoles(item)"
        @click="open(item)"
        :key="item[labelKey]"
        :class="{
          'is-active2': item.path == activePath,
          'is-active': vaildAvtive(item),
        }"
      >
        <span
          slot="title"
          :class="{ 'el-menu--display': collapse && first }"
          :alt="item[pathKey]"
          >{{ item[labelKey] }}</span
        >
        <i :class="item[iconKey]"></i>
      </div>
      <div
        v-else-if="!validatenull(item[childrenKey]) && vaildRoles(item)"
        :key="item[labelKey]"
        @mouseover="activePath = item.path"
        @mouseleave="activePath = null"
      >
        <div
          class="mysideBarItem flex-space"
          :class="{
            'is-active2': item.path == activePath,
            'is-active': vaildAvtive2(item),
          }"
        >
          <span :class="{ 'el-menu--display': collapse && first }">{{
            item[labelKey]
          }}</span>
          <i :class="item[iconKey]"></i>
        </div>
        <transition name="el-fade-in-linear">
          <div
            class="mysideBarItem2"
            v-show="
              !fastBox
                ? activePath
                  ? item.path == activePath
                  : vaildAvtive2(item)
                : false
            "
          >
            <div class="mysideBarItemTit flex-c">
              <i :class="item[iconKey]"></i>
              <span style="margin-left: 5px">{{ item[labelKey] }}</span>
            </div>
            <div class="mysideBarItemCont">
              <template v-for="(child, cindex) in item[childrenKey]">
                <div
                  class="mysideBarItemContItem flex-c"
                  @click="open(child)"
                  :class="{
                    'is-active':
                      vaildAvtive(child) || activeItemPath == child.path,
                  }"
                  v-if="validatenull(child[childrenKey])"
                  :key="child[labelKey]"
                  @mouseover="activeItemPath = child.path"
                  @mouseleave="activeItemPath = null"
                >
                  <span>{{ child[labelKey] }}</span>
                </div>
                <sidebar-item-child
                  v-else
                  :menu="[child]"
                  :key="cindex"
                  :props="props"
                  :screen="screen"
                  :collapse="collapse"
                ></sidebar-item-child>
              </template>
            </div>
          </div>
        </transition>
      </div>
    </template>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { validatenull } from "@/util/validate";
import config from "./config.js";

import sidebarItemChild from "./sidebarItemChild";
export default {
  name: "sidebarItem",
  components: { sidebarItemChild },
  data() {
    return {
      config: config,
      activePath: null,
      activeItemPath: null,
      fastBox: false,
      fastData: [{
        children: [],
        hasChildren: null,
        icon: "icon-bangzhushouji",
        id: 10263,
        keepAlive: "0",
        label: "公告",
        name: "公告",
        parentId: 10209,
        path: "/circleNotice/circlenotice/index",
        permission: "",
        sort: 8,
        spread: false,
        type: "0"
      },
      {
        children: [],
        hasChildren: null,
        icon: "icon-bangzhushouji",
        id: 10263,
        keepAlive: "0",
        label: "活动",
        name: "活动",
        parentId: 10209,
        path: "/circleActivity/circleactivity/index",
        permission: "",
        sort: 8,
        spread: false,
        type: "0"
      },
      {
        children: [],
        hasChildren: null,
        icon: "icon-bangzhushouji",
        id: 10263,
        keepAlive: "0",
        label: "知识分享",
        name: "知识分享",
        parentId: 10209,
        path: "/circleDynamic/circledynamic/index",
        permission: "",
        sort: 8,
        spread: false,
        type: "0"
      },
      {
        children: [],
        hasChildren: null,
        icon: "icon-bangzhushouji",
        id: 10263,
        keepAlive: "0",
        label: "学习包",
        name: "学习包",
        parentId: 10209,
        path: "/circleLearningBackage/circlelearningbackage/index",
        permission: "",
        sort: 8,
        spread: false,
        type: "0"
      },
      {
        children: [],
        hasChildren: null,
        icon: "icon-bangzhushouji",
        id: 10263,
        keepAlive: "0",
        label: "学习任务",
        name: "学习任务",
        parentId: 10209,
        path: "/circleTaskLearningbackage/circletasklearningbackage/index",
        permission: "",
        sort: 8,
        spread: false,
        type: "0"
      }]
    };
  },
  props: {
    menu: {
      type: Array
    },
    screen: {
      type: Number
    },
    first: {
      type: Boolean,
      default: false
    },
    props: {
      type: Object,
      default: () => {
        return {};
      }
    },
    collapse: {
      type: Boolean
    }
  },
  watch: {

  },
  created() {
    // console.log(this.menu)
  },
  mounted() { },
  computed: {
    ...mapGetters(["roles"], 'leftFlag'),
    labelKey() {
      return this.props.label || this.config.propsDefault.label;
    },
    pathKey() {
      return this.props.path || this.config.propsDefault.path;
    },
    iconKey() {
      return this.props.icon || this.config.propsDefault.icon;
    },
    childrenKey() {
      return this.props.children || this.config.propsDefault.children;
    },
    nowTagValue() {
      return this.$router.$avueRouter.getValue(this.$route);
    }
  },
  methods: {
    vaildAvtive2(item) {
      // console.log('vaildAvtive2', item, this.nowTagValue, this.pathKey)
      let flag = false;
      if (item.children.length) {
        item.children.forEach(i => {
          this.nowTagValue === i[this.pathKey] ? (flag = true, this.$store.commit('SET_LEFTFLAg', true)) : '';
        })
      }
      return flag;
    },
    vaildAvtive(item) {
      const groupFlag = (item["group"] || []).some(ele =>
        this.$route.path.includes(ele)
      );
      // console.log(this.nowTagValue, item[this.pathKey], groupFlag)

      return this.nowTagValue === item[this.pathKey] || groupFlag;
    },
    vaildRoles(item) {
      item.meta = item.meta || {};
      return item.meta.roles ? item.meta.roles.includes(this.roles) : true;
    },
    validatenull(val) {
      return validatenull(val);
    },
    open(item) {
      this.$store.commit('SET_LEFTFLAg', false)
      if (this.screen <= 1) this.$store.commit("SET_COLLAPSE");
      this.$router.$avueRouter.group = item.group;
      this.$router.push({
        path: this.$router.$avueRouter.getPath({
          name: item[this.labelKey],
          src: item[this.pathKey]
        }),
        query: item.query
      }).catch(() => { });
    }
  }
};
</script>

